<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Order List</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
  <style>.layui-table {
    table-layout: auto; /* 自动调整表格布局 */
    width: auto; /* 自动适应内容宽度 */
  }

  .layui-table-cell {
    white-space: nowrap; /* 防止内容换行 */
  }
  </style>
  <script src="../../echarts.js"></script>
</head>
<body>
<fieldset class="table-search-fieldset">
  <legend>搜索信息</legend>
  <div style="margin: 10px 10px 10px 10px">
    <form class="layui-form layui-form-pane" action="">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">订单状态</label>
          <div class="layui-input-inline">
            <select name="orderStatus">

              <option value=-1>任何</option>

              <option value=0>已提交</option>

              <option value=1>已接单</option>

              <option value=2>待确认</option>

              <option value=3>已付款</option>

            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">优先级</label>
          <div class="layui-input-inline">
            <select name="orderPriority">

              <option value=-1>任何</option>

              <option value=0>0</option>

              <option value=1>1</option>

              <option value=2>2</option>

              <option value=3>3</option>

            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">预约时间</label>
          <div class="layui-input-inline">
            <input type="text" name="orderDate" readonly placeholder="任何" class="layui-input demo-table-search-date">
          </div>
          <div class="layui-input-inline">
            <select class="layui-input-inline" name="orderTime">

              <option value=-1>任何</option>

              <option value=0>上午</option>

              <option value=1>下午</option>

              <option value=2>晚上</option>

            </select>
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label">订单号</label>
          <div class="layui-input-inline">
            <input type="text" name="orderId" class="layui-input">
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label">手机号</label>
          <div class="layui-input-inline">
            <input type="text" name="orderClientphone" class="layui-input">
          </div>
        </div>
          <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
        </div>

    </form>

  </div>
</fieldset>




<div class="layui-container">

  <div class="layui-col-xs12">
    <table class="layui-table" id="mytable" lay-filter="orderTable"></table>
  </div>

</div>

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="../../js/axios.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.6.8/layui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

<script>


  layui.use(['table', 'layer','form','laydate'], function(){
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;
    var laydate = layui.laydate;
    
    //日期
    laydate.render({
      elem: '.demo-table-search-date'
    });
    // 表格渲染
    table.render({
      elem: '#mytable',
      url: 'http://localhost:8080/order/getAll',
      method: 'GET',
      page: true,
      limit: 10,
      cols: [[
        {field: 'orderId', title: '订单号',hide: true},
        {field: 'userName', title: '用户',width: 60,},
        {field: 'productId', title: '产品ID',hide: true},
        {field: 'engineerName', title: '工程师',width: 80,},
        {field: 'orderStatus', width:80, title: '状态',templet: '#StatusTpl'},
        {field: 'orderPriority', width:80, title: '优先级'},

        {field: 'orderDate', title: '预约日期',hide: true,sort:true},
        {field: 'orderTime', title: '预约时间',hide: true},
        {title: '预约时间',templet: '#dateTimeTpl',width:135},

        {field: 'orderClientphone', title: '客户电话',width:120},

        {title: '地址',templet: '#AddressTpl',width:158},
        {field: 'orderAddress',width:175,minWidth:175,title: '详细地址'},

        {field: 'orderDescription', width:175,minWidth:175,title: '订单描述'},
        // {field: 'orderProvince', title: '省地址',hide: true},
        // {field: 'orderCity', title: '市地址',hide: true},
        // {field: 'orderArea', title: '区地址',hide: true},
        {fixed: 'right', title:'操作', toolbar: '#operationBar',width: 140}
      ]]
    });

// 监听表单提交事件
    form.on('submit(data-search-btn)', function(data) {
      // 获取表单输入的值

      data = data.field;

      console.log(data);
      console.log(data.orderDate);

      // 重新加载表格数据
      table.reload('mytable', {
        url: 'http://localhost:8080/order/findSome', // 重新加载数据的 URL
        method: 'POST',
        where: data,
        page: { // 指定页码和每页显示的数据条数
          curr: 1,
          limit: 10
        },
        done: function(res, curr, count) {
          // 重新加载完成后的回调函数
          console.log('重新加载完成');
        }
      });
      // var tableData = layui.table.cache['mytable'];
      // console.log(tableData);
      return false;
    });

    // 监听表格行工具栏事件
    table.on('tool(orderTable)', function(obj){
      var data = obj.data;
      var orderId = data.orderId;
      console.log(data);
      if(obj.event === 'detail'){
        showOrderLog(orderId);
      }
      if(obj.event === 'viewFlow'){
        showFlowDetail(orderId);
      }

    });

    function showMoneyLog(orderId){

    }
    function showFlowDetail(orderId) {
      layer.open({
        type: 1,
        title: '流水明细',
        area: ['800px', '600px'],
        content: '<table class="layui-table" id="flowTable"></table>',

        success: function(layero, index){
          var form = new FormData();
          form.append("orderId",orderId);
          console.log(orderId);
          // 发送请求获取流水明细数据
          axios.post('http://localhost:8080/money/findOne',form, {
            withCredentials: true,
          })
                  .then(function (response) {
                    var rdata = response.data;
                    console.log(rdata);
                    // 表格渲染
                    table.render({
                      elem: '#flowTable',
                      data: rdata.data,
                      page: true,
                      limit: 10,
                      cols: [[
                        {field: 'sysName', title: '用户', width: 120},
                        {field: 'money', title: '金额', width: 100},
                        {field: 'logTime', title: '操作时间', width: 180},
                        {field: 'logDescription', title: '描述'}
                      ]]
                    });
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
        }
      });
    }

    function showOrderLog(orderId) {
        layer.open({
          type: 1,
          title: '订单日志',
          area: ['1000px', '600px'],
          content: '<table class="layui-table" id="logTable"></table>',
          success: function(layero, index){
            // 表格渲染
            table.render({
              elem: '#logTable',
              url: 'http://localhost:8080/order/getLogs/' + orderId,
              method: 'GET',
              page: true,
              limit: 10,
              cols: [[
                // {field: 'orderId', title: '订单号',hide: true},
                // {field: 'userName', title: '用户',width: 60,},
                // {field: 'productId', title: '产品ID',hide: true},
                {field: 'engineerName', title: '工程师',width: 120,},
                {field: 'logStatus', width:80, title: '状态',templet: '#logStatusTpl'},
                // {field: 'orderPriority', width:80, title: '优先级'},

                // {field: 'orderDate', title: '预约日期',hide: true,sort:true},
                // {field: 'orderTime', title: '预约时间',hide: true},
                {title: '操作时间',templet: '#logTimeTpl',width:180},

                // {field: 'orderClientphone', title: '客户电话',width:120},

                // {title: '地址',templet: '#AddressTpl',width:158},
                // {field: 'orderAddress',width:175,minWidth:175,title: '详细地址'},

                {field: 'logDescription', minWidth:175,title: '描述'},
                // {field: 'orderProvince', title: '省地址',hide: true},
                // {field: 'orderCity', title: '市地址',hide: true},
                // {field: 'orderArea', title: '区地址',hide: true},
                // {fixed: 'right', title:'操作', toolbar: '#operationBar',width: 70}
              ]]
            });
          }
        });

    }
  });

</script>

<!-- 自定义操作工具栏模板 -->

<script type="text/html" id="logTimeTpl">
  {{d.logTime.substring(0,10)}} {{d.logTime.substring(11,19)}}
</script>

<script type="text/html" id="logStatusTpl">
  {{# if(d.logStatus === 0){ }}
  已提交
  {{# } else if(d.logStatus === 1){ }}
  已接单
  {{# } else if(d.logStatus === 2){ }}
  待确认
  {{# } else if(d.logStatus === 3){ }}
  已完成
  {{# } else if(d.logStatus === 4){ }}
  未完结
  {{# } }}
</script>

<script type="text/html" id="dateTimeTpl">
  {{# if(d.orderTime === 0){ }}
    {{d.orderDate}}上午
  {{# } else if(d.orderTime === 1){ }}
    {{d.orderDate}}下午
  {{# } else if(d.orderTime === 2){ }}
    {{d.orderDate}}晚上
  {{# } }}
</script>

<script type="text/html" id="AddressTpl">
    {{d.orderProvince}}{{d.orderCity}}{{d.orderArea}}
</script>

<script type="text/html" id="StatusTpl">
  {{# if(d.orderStatus === 0){ }}
    已提交
  {{# } else if(d.orderStatus === 1){ }}
    已接单
  {{# } else if(d.orderStatus === 2){ }}
    待确认
  {{# } else if(d.orderStatus === 3){ }}
    已完成
  {{# } else if(d.orderStatus === 4){ }}
    未完结
  {{# } }}
</script>

<script type="text/html" id="operationBar">
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">日志</a>
  {{# if(d.orderStatus === 3){ }}
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="viewFlow">金额流水</a>
  {{# } }}
</script>


<script>
  $(document).ready(function() {
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true,
      'positionFromTop': 100
    });
  });
</script>

</body>
</html>
